<template>
  <div class="">
    
    <div class="setbox">
      <div style="padding:10px 0 0 10px">修改手机号码</div>
      <div class="setform">
      <el-form ref="ruleForm2" :model="ruleForm2" :rules="rules" label-position="left" label-width="120px" style="width:450px;">
        <el-form-item label="已绑定手机号:"  >
           {{ruleForm2.olderTel}}
        </el-form-item>
       
        <el-form-item label="新手机号码:" prop="newTel">
          <el-input type="text" v-model="ruleForm2.newTel" placeholder="输入验证码"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="vCode">
          <el-input type="text" v-model="ruleForm2.vCode"  style="width:120px"></el-input>
          <el-button type="primary" @click="reverTime(22)"  :disabled="disabled" style="margin-left:19px">{{timeValue}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%" @click="goHome('ruleForm2')">确认修改</el-button>
        </el-form-item>
      </el-form>
     
      </div>
    </div>
  </div>
</template>

<script>
  import crypto from 'crypto'
  import Http from '@/Http/Http'
  export default {

    data() {
      
      
      const newTel = (rele,value,callback) => {
        if(value ===''){
          return callback(new Error('请输入密码'))
        } else{
          callback()
        }
      }
      
      const vCode = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请再次输入密码'));
          
        }else {
          callback();
        }
      };
      return {
        timeValue:'发送',
        disabled:false,
        time:60,
        ruleForm2: {
          olderTel:'',
          newTel:'',
          vCode:'',
        },
        rules:{
          newTel:[
            {validator:newTel,trigger:'blur'}
          ],
          vCode: [
            { validator: vCode, trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      this.ruleForm2.olderTel = sessionStorage.getItem('tel')
    },
    methods: {
     goHome(val){
       
       this.$refs[val].validate( (valid) => {
         if(!this.ruleForm2.newTel){
           this.$message.error('请输入手机号')
           return
         }
         if(!this.ruleForm2.vCode){
           this.$message.error('请输入验证码')
           return
         }
          const obj ={
            'tel':this.ruleForm2.newTel,
            'vcode':this.ruleForm2.vCode
          };
          Http.bindTel(obj)
         .then( res => {
           if ( res.data.code == 200){
             this.$message.success('手机号码修改成功')
           } else {
              this.$message.error(`修改失败,原因${res.data.message}`);
           } 
         })
       })
      },
      reverTime(val) {
        this.disabled = true;
        if(!this.ruleForm2.newTel){ 
          this.$message.error('请输入电话号码') 
          return
        }

        Http.getHmsAuthCode({
          "phone":this.ruleForm2.newTel,
          "type":val
        }).then(res=>{
          var intTime = setInterval(()=>{
            -- this.time;
            this.timeValue = `${this.time}s`
            if (this.time <1) { 
              this.disabled = false;
              this.time = 60;
              clearInterval(intTime)
              this.timeValue = '重新发送'
            }
          },1000)
          if(res.data.code == 406 ){
            this.disabled = false;
            this.time = 60;
            clearInterval(intTime)
            this.timeValue = '重新发送'
           this.$message.error(res.data.message)
          }else if(res.data.code == -1002) {
            this.$message.error(res.data.message)
          }
        }); 
        
      }
    }
  }
</script>
<style>
.setbox{
  /* display: flex;
  justify-content: center;
  align-items: center; */
  width: 560px;
  margin: 50px 0 0 100px;
  background: #fff;
  
  border-radius: 10px;
}
.setform{
  padding: 30px;
}
</style>

